﻿<h4>From a List of Option&lt;string&gt; items</h4>
<p>Second item in the list is initially selected through the <code>OptionSelected</code> (Func delegate) parameter.</p>

<FluentSelect Items=@stringOptions1
               OptionText="@(i => i.Text)"
               OptionValue="@(i => i.Value)"
               OptionSelected="@(i => i.Selected)"
               @bind-Value="@stringValue" />
<p>
    Selected Value: @stringValue<br />
</p>

<h4>From a List of Option&lt;int&gt; items</h4>
<p>First item in the list is disabled through the <code>OptionDisabled</code> (Func delegate) parameter.</p>
<p><em>Note that the second option in the list is automatically highlighted but it has <strong>NOT</strong> been selected. It's just the first item in the list available for selection</em></p>
<FluentSelect Items=@intOptions
              TOption="Option<int>"
              OptionText="@(i => i.Text)"
              OptionValue="@(i => i.Value.ToString())"
              OptionDisabled="@(i => i.Disabled)"
@bind-SelectedOption="@selectedIntOption"
@bind-Value="@intValue" />
<p>
    Selected Value: @intValue<br />
    Selected Item (strongly typed): <br />
    Value: @selectedIntOption?.Value (Type: @(selectedIntOption?.Value.GetType())) <br />
    Text: @selectedIntOption?.Text
</p>

<h4>From a list of Option&lt;string&gt; items where multiple can be selected</h4>
<p>Items 2, 5 and 8 are initially selected through the <code>OptionSelected</code> (Func delegate) parameter.</p>
<p>Items with a value higher than 6 are disabled through the <code>OptionDisabled</code> (Func delegate) parameter.</p>
<p><em>Note that Item 8 is selected but also disabled and can therefore <strong>NOT</strong> be changed.</em></p>
<div style="display: block; height: 300px;">
    <FluentSelect Items=@stringOptions2
                  TOption="Option<string>"
                  Multiple=true
                  OptionText="@(i => i.Text)"
                  OptionValue="@(i => i.Value)"
                  OptionSelected="@(i => i.Selected)"
                  OptionDisabled="@(i => int.Parse(i.Value!) > 6)"
                  @bind-SelectedOptions="@selectedStrings" />
</div>
<p>
    Selected strings: @(selectedStrings != null ? string.Join(',', selectedStrings.Select(o => o.Value)) : "")<br />
</p>

@code {
    string? stringValue;
    string? intValue;
    Option<int>? selectedIntOption;
    IEnumerable<Option<string>>? selectedStrings;

    static List<Option<string>> stringOptions1 = new()
    {
        { new Option<string> { Value = "9", Text = "Nine", Icon = (new Icons.Regular.Size24.AppsList(), Color.Neutral, "start" ) } },
        { new Option<string> { Value = "8", Text = "Eight", Selected = true } },
        { new Option<string> { Value = "7", Text = "Seven" } },
        { new Option<string> { Value = "6", Text = "Six" } },
        { new Option<string> { Value = "5", Text = "Five" } },
        { new Option<string> { Value = "4", Text = "Four" } },
        { new Option<string> { Value = "3", Text = "Three" } },
        { new Option<string> { Value = "2", Text = "Two" } },
        { new Option<string> { Value = "1", Text = "One" } }

    };

    static List<Option<string>> stringOptions2 = new()
    {
        { new Option<string> { Value = "1", Text = "One" } },
        { new Option<string> { Value = "2", Text = "Two", Selected = true } },
        { new Option<string> { Value = "3", Text = "Three" } },
        { new Option<string> { Value = "4", Text = "Four" } },
        { new Option<string> { Value = "5", Text = "Five", Selected = true } },
        { new Option<string> { Value = "6", Text = "Six" } },
        { new Option<string> { Value = "7", Text = "Seven" } },
        { new Option<string> { Value = "8", Text = "Eight", Selected = true } },
        { new Option<string> { Value = "9", Text = "Nine" } }

    };

    List<Option<int>> intOptions = new()
    {
        { new Option<int> { Value = 1, Text = "1", Disabled = true, Icon = (new Icons.Regular.Size24.NumberCircle1(), Color.Neutral, "start" ) } },
        { new Option<int> { Value = 2, Text = "2", Icon = (new Icons.Regular.Size24.NumberCircle2(), Color.Neutral, "end" ) } },
        { new Option<int> { Value = 3, Text = "3", Icon = (new Icons.Regular.Size24.NumberCircle3(), Color.Neutral, "start" ) } }

    };
}
